<template>
        <el-row>
            <el-col :span="24">
            <el-select v-model="state.selected" class="m-2" placeholder="Select" 
            @change="change"
            size="large">
                <el-option v-for="item in state.options" :key="item" :label="item" :value="item" />
            </el-select>

            <el-text> 数量：{{ state.data.length }} </el-text>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
            <el-table :data="state.data" height="800" 
            :cell-class-name="tableCellClassName"
            @sort-change="sortChange"
            :default-sort="state.sort"
            @cell-click="cellClick"
            style="width: 100%">
                <el-table-column prop="date" label="日期" sortable width="210"/>
                <el-table-column prop="category" label="类别" sortable width="120"/>
                <el-table-column prop="stock" label="股票" width="150">
                    <template #default="scope">
                        <ToStockDetail :stock="scope.row.stock" />
                    </template> 
                </el-table-column>
                <el-table-column prop="industry" label="行业" sortable width="200"/>
                <el-table-column prop="close" label="价格" width="100"/>
                <el-table-column prop="duration" sortable label="上次突破间隔" width="100"/>
                <el-table-column prop="weekPct" label="周涨跌"  sortable width="100"/>
                <el-table-column prop="nextWeekPct" label="下周涨跌"  sortable width="100"/>
                <el-table-column prop="lp" label="分位点" sortable width="100"/>
                <el-table-column prop="disPct" label="300日线"  sortable width="100"/>
                <el-table-column prop="cur60wPct" label="cur60wPct"  sortable width="100"/>
            </el-table>
            </el-col>
        </el-row>
</template>

<script setup>
import { reactive } from 'vue';
import { getYearLineUp } from '../service/statistic'
import ToStockDetail from './ToStockDetail.vue';
import { getLpClassName } from '../utils/help';
import LpElTableColumn from './element/LpElTableColumn.vue';

const selectKey = "WeekDown300DSelect"
const sortPropKey = "WeekUp300DSortProp"
const sortOrderKey = "WeekUp300DSortOrder"

const state = reactive({
    options: [],
    data: [],
    selected: "",
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || 'lp' , 
        order: sessionStorage.getItem(sortOrderKey) || 'ascending' 
    }
})

const loadData = () => {
    getYearLineUp(state.selected).then( res => {
        state.options = res.data.date
        state.data = res.data.data

        state.selected = state.data[0].date
    })
}

loadData()

const change = () => {
    loadData()
}

const sortChange = (column, prop, order) => {
    sessionStorage.setItem(sortPropKey, column.prop)
    sessionStorage.setItem(sortOrderKey, column.order)
}

//单击
function cellClick(row, column, cell, event) {
}

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {

    let property = column.property
    let val = row[property]

    if (["cur60wPct","nextWeekPct"].includes(property)) {
        if (val < 0) {
            return 'lt0-cell'
        }
    }

    if (property == "duration") {
        if ([1,2].includes(val)) {
            return 'd300up-cell'
        }
    }

    if (property == "lp") {
        return getLpClassName(val)
    }

    return ''
}
</script>

<style>
</style>